<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="utf-8" />
		<title>树型下拉框</title>
		<meta text="viewport" content="width=device-width, initial-scale=1" />
		<meta text="description" content="Static &amp; Dynamic Tables" />
		<!-- basic styles -->
		<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="assets/css/bootstrap-treeview.min.css" />
		<link rel="stylesheet" href="assets/css/bootstrap-table.min.css" />
		<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="assets/css/ui.jqgrid.css" />
		<!-- fonts -->
		<link rel="stylesheet" href="assets/font-user-defined.css" />
		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" />
		<!-- ace styles -->
		<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
		<link rel="stylesheet" href="assets/css/jquery.gritter.css" />
		<link rel="stylesheet" href="assets/css/jquery-ui.min.css" />
		<link rel="stylesheet" href="assets/css/chosen.css" />
		<link rel="stylesheet" href="assets/css/ace.min.css" />
		<!-- inline styles related to this page -->
		<link rel="stylesheet" href="assets/css/foundation-datepicker.css" />
		<!-- ace settings handler -->
		<link rel="stylesheet" href="assets/css/easydialog.css" />
		<!--  <link rel="stylesheet" href="assets/style.css" />-->
		<link rel="stylesheet" href="assets/easydropdown.css" />
		<link rel="stylesheet" href="assets/css/ace-fonts.css" />
		<link rel="stylesheet" href="assets/css/colorpicker.css" />
		<link rel="stylesheet" href="selfjs/select2.css" />

		<script src="assets/js/ace-extra.min.js"></script>
		<script src="assets/js/jquery-2.0.3.min.js"></script>
		<script src="assets/js/bootstrap-treeview.min.js"></script>
		<script src="assets/js/bootstrap-colorpicker.min.js"></script>
		<script src="assets/js/sockjs.min.js"></script>
		<script src="assets/angular.min.js"></script>
		<script src="assets/angular-route.js"></script>
		<script src="selfjs/indexapp.js"></script>
		<!-- <script src="selfjs/reporter_app.js"></script>-->
		<script src="selfjs/router.js"></script>
		<!-- <script  src="selfjs/general.js"></script>-->
		<script src="selfjs/generalExtend.js"></script>
		<script src="selfjs/index_ctrl.js"></script>
		<script src="selfjs/echarts-plain.js"></script>
		<script src="main/navbar_ctrl.js"></script>
		<!--自定义style样式，最后加载-->
		<link rel="stylesheet" href="selfjs/indexStyle.css" />
	</head>

	<body>
		<div class="shouce-container">
			<div class="container">
				<div class="row">
					<div class="col-sm-4">
						<select id="selectTree" style="width:100%">
							<div align="center">
								<input type="text" id="input-search" style="width:100%">
								<div id="treeview" style="width:100%"></div>
							</div>
						</select>
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			$(function() {
				var iconlist = [{
					"primaryKey": 17,
					"text": "icon-apple",
					"icon": "icon-apple"
				}, {
					"primaryKey": 18,
					"text": "icon-bell",
					"icon": "icon-bell"
				}, {
					"primaryKey": 19,
					"text": "icon-book",
					"icon": "icon-book"
				}];
				var json = '[' +
					'{' +
					'"text": "Parent 1",' +
					'"nodes": [' +
					'{' +
					'"text": "Child 1",' +
					'"nodes": [' +
					'{' +
					'"text": "Grandchild 1"' +
					'},' +
					'{' +
					'"text": "Grandchild 2"' +
					'}' +
					']' +
					'},' +
					'{' +
					'"text": "Child 2"' +
					'}' +
					']' +
					'},' +
					'{' +
					'"text": "Parent 2"' +
					'},' +
					'{' +
					'"text": "Parent 3"' +
					'},' +
					'{' +
					'"text": "Parent 4"' +
					'},' +
					'{' +
					'"text": "Parent 5"' +
					'}' +
					']';

				var $searchableTree = $('#treeview').treeview({
					data: json,
					onNodeSelected: function(event, data) {
						console.log(data);
						$("#selectTree").html("<option selected='selected'>" + data.text + "</option>");
						showTree();
						var value = $("#selectTree").val();
						console.log("value = " + value);
					}
				});
				$("#treeview").hide();
				$('#input-search').hide();
				$("#selectTree").on("click", showTree);

				function showTree() {
					$("#treeview").toggle();
					$('#input-search').toggle();
				}
				var search = function(e) {
					var pattern = $('#input-search').val();
					var options = {
						ignoreCase: true,
						revealResults: true
					};
					$searchableTree.treeview('search', [pattern, options]);
				}
				$('#input-search').keyup(search);
			});
		</script>

		<script src="assets/js/bootstrap.min.js"></script>
		<script src="assets/js/typeahead-bs2.min.js"></script>
		<!-- page specific plugin scripts -->
		<script src="assets/js/jquery-ui.min.js"></script>
		<script src="assets/js/bootstrap-datetimepicker.js"></script>
		<script src="assets/js/foundation-datepicker.js"></script>
		<script src="assets/js/foundation-datepicker.zh-CN.js"></script>
		<script src="assets/js/easydialog.js"></script>
		<script src="assets/js/jquery-ui-1.10.3.custom.min.js"></script>
		<script src="assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="assets/js/jquery.slimscroll.min.js"></script>
		<script src="assets/js/jquery.easy-pie-chart.min.js"></script>
		<script src="assets/js/jquery.sparkline.min.js"></script>
		<script src="assets/js/chosen.jquery.min.js"></script>
		<script src="assets/js/flot/jquery.flot.min.js"></script>
		<script src="assets/js/flot/jquery.flot.pie.min.js"></script>
		<script src="assets/js/flot/jquery.flot.resize.min.js"></script>
		<script src="assets/js/flot/jquery.flot.time.min.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>
		<!--<script src="assets/bootstrap2.3/js/bootstrap.min.js"></script>-->
		<script src="assets/js/tableExport.js"></script>
		<script src="assets/js/jquery.base64.js"></script>
		<script src="assets/js/bootstrap-table.js"></script>
		<script src="assets/js/bootstrap-table-export.js"></script>
		<!-- ace scripts -->
		<script src="assets/js/jquery.easydropdown.min.js"></script>
		<script src="assets/js/jqGrid/jquery.jqGrid.min.js"></script>
		<script src="assets/js/jqGrid/i18n/grid.locale-cn.js"></script>
		<script src="assets/js/extend/jquery.jqGrid.extend.js"></script>
		<script src="assets/js/extend/jquery-ui.dialog.extend.js"></script>
		<script src="assets/js/ace-elements.min.js"></script>
		<script src="assets/js/ace.min.js"></script>
		<script src="assets/js/jquery.gritter.min.js"></script>
		<script src="selfjs/dateFormat.js"></script>
		<script src="selfjs/select2.js"></script>
		<script src="selfjs/index.js"></script>
	</body>

</html>